<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <el-row type="flex" align="middle" justify="space-between">
          <el-col :span="6">
            <div class="logo">
            
              <span class="logo-text">智能冰箱管理系统</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="header-center">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPage }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="header-right">
              <!-- 未登录状态显示登录按钮 -->
              <div v-if="!isLoggedIn" class="login-section">
                <el-button type="primary" @click="goToLogin">
                  <el-icon><User /></el-icon>
                  登录
                </el-button>
                <el-button @click="goToRegister">
                  <el-icon><Edit /></el-icon>
                  注册
                </el-button>
              </div>
              
              <!-- 已登录状态显示用户信息 -->
              <el-dropdown v-else @command="handleCommand">
                <span class="user-info">
                  <el-avatar :size="32" :src="userAvatar">
                    {{ userInfo?.username?.charAt(0) || '管' }}
                  </el-avatar>
                  <span class="username">{{ userInfo?.username || '管理员' }}</span>
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="profile">
                      <el-icon><User /></el-icon>个人信息
                    </el-dropdown-item>
                    <el-dropdown-item command="password">
                      <el-icon><Lock /></el-icon>修改密码
                    </el-dropdown-item>
                    <el-dropdown-item divided command="logout">
                      <el-icon><SwitchButton /></el-icon>退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="220px" class="sidebar">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
          >
            <!-- 系统首页 -->
            <el-menu-item index="/home/HomeMain">
              <el-icon><House /></el-icon>
              <span>系统首页</span>
            </el-menu-item>
            
            <!-- 冰箱食材管理 -->
            <el-sub-menu index="food">
              <template #title>
                <el-icon><Refrigerator /></el-icon>
                <span>冰箱食材管理</span>
              </template>
              <el-menu-item index="/home/food">
                <el-icon><List /></el-icon>
                <span>食材列表</span>
              </el-menu-item>
              <!-- <el-menu-item index="/home/food/add">
                <el-icon><Plus /></el-icon>
                <span>添加食材</span>
              </el-menu-item>
              <el-menu-item index="/home/food/expiring">
                <el-icon><Warning /></el-icon>
                <span>即将过期</span>
              </el-menu-item> -->
            </el-sub-menu>

            <!-- 用户管理 -->
            <el-sub-menu index="user">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/home/user">
                <el-icon><List /></el-icon>
                <span>用户列表</span>
              </el-menu-item>
              <el-menu-item index="/home/role">
                <el-icon><Key /></el-icon>
                <span>角色管理</span>
              </el-menu-item>
              <el-menu-item index="/home/permission">
                <el-icon><Lock /></el-icon>
                <span>权限管理</span>
              </el-menu-item>
              <el-menu-item index="/home/user-role">
                <el-icon><UserFilled /></el-icon>
                <span>用户角色管理</span>
              </el-menu-item>
              <el-menu-item index="/home/role-permission">
                <el-icon><Lock /></el-icon>
                <span>角色权限管理</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- AI食谱推荐 -->
            <el-sub-menu index="recipe">
              <template #title>
                <el-icon><MagicStick /></el-icon>
                <span>食谱管理</span>
              </template>
              <el-menu-item index="/home/recipe">
                <el-icon><Promotion /></el-icon>
                <span>食谱管理</span>
              </el-menu-item>
              <!-- <el-menu-item index="/home/recipe/history">
                <el-icon><Clock /></el-icon>
                <span>历史记录</span>
              </el-menu-item>
              <el-menu-item index="/home/recipe/favorites">
                <el-icon><Star /></el-icon>
                <span>我的收藏</span>
              </el-menu-item> -->
            </el-sub-menu>

            <!-- 其他菜单项 -->
            <el-menu-item index="/home/data-statistics">
              <el-icon><DataAnalysis /></el-icon>
              <span>数据统计</span>
            </el-menu-item>

            <el-menu-item index="/home/system-settings">
              <el-icon><Setting /></el-icon>
              <span>系统设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <!-- 页面标题区域 -->
            <div class="page-header">
              <h2 class="page-title">{{ currentPage }}</h2>
              <div class="page-actions">
                <el-button type="primary" :icon="Refresh" circle @click="refreshPage" />
              </div>
            </div>
            
            <!-- 内容区域 -->
            <el-card class="content-card" shadow="never">
              <div class="page-content">
                <router-view></router-view>
              </div>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  House,
  Refrigerator,
  User,
  MagicStick,
  ArrowDown,
 
  Lock,
  SwitchButton,
  List,
  // Plus,
  // Warning,
  // Key,
  Promotion,
  // Clock,
  // Star,
  DataAnalysis,
  Setting,
  Refresh,
  Edit
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const isLoggedIn = ref(false) // 根据实际登录状态设置
const userInfo = ref(null)
const userAvatar = ref('')

// 跳转登录页面
const goToLogin = () => {
  router.push('/login')
}

// 跳转注册页面
const goToRegister = () => {
  router.push('/register')
}

// 计算当前激活的菜单
const activeMenu = computed(() => route.path)

// 计算当前页面标题
const currentPage = computed(() => {
  return route.meta?.title || '智能冰箱管理系统'
})

// 刷新页面
const refreshPage = () => {
  // 重新加载当前路由
  router.go(0)
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      console.log('个人信息')
      break
    case 'password':
      console.log('修改密码')
      break
    case 'logout':
      // 1. 清除 localStorage 中的登录数据（核心步骤）
      localStorage.removeItem('token'); // 删除 token
      localStorage.removeItem('userInfo'); // 删除用户信息

      // 2. 同步更新登录状态（让 isLoggedIn 变为 false，UI 自动切换为未登录）
      updateStatus(); // 之前定义的更新状态方法，会重新检测 localStorage

      break
  }
}

//更新状态代码
const updateStatus = () => {
   const storedUser = localStorage.getItem('userInfo')

    // 根据 token 是否存在，更新登录状态
  isLoggedIn.value =!!storedUser // 有 token → true，无 → false
  //  if(storedUser !== null){
     
  //  }

}


onMounted(() => {
  // 初始化逻辑
 updateStatus()  // 组件挂载时执行一次，避免刷新后状态丢失


})
</script>

<style scoped>




.layout-container {
  height: 100vh;
  background-color: #f0f2f5;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 18px;
}

.logo-text {
  color: white;
}

.header-center {
  display: flex;
  justify-content: center;
}

:deep(.el-breadcrumb__inner) {
  color: rgba(255, 255, 255, 0.9) !important;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: white !important;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 水平右对齐 */
  height: 100%; /* 让容器高度与父元素（el-col）一致 */
  gap: 10px; /* （可选）增加按钮之间的间距，提升美观度 */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.username {
  font-weight: 500;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #304156;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1);
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.sidebar-menu .el-menu-item,
.sidebar-menu .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu .el-menu-item:hover,
.sidebar-menu .el-sub-menu__title:hover {
  background-color: #263445 !important;
}

/* 主内容区域 */
.main-content {
  padding: 0;
  background-color: #f0f2f5;
}

.content-wrapper {
  padding: 20px;
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.page-title {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-actions {
  display: flex;
  gap: 8px;
}

.content-card {
  border-radius: 8px;
  border: 1px solid #e6e8eb;
}

:deep(.el-card__header) {
  border-bottom: 1px solid #e6e8eb;
  background-color: #fafbfc;
  padding: 16px 20px;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.page-content {
  min-height: 400px;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 64px !important;
  }
  
  .logo-text {
    display: none;
  }
  
  .header-center {
    display: none;
  }
}

/* 滚动条样式 */
:deep(.el-menu)::-webkit-scrollbar {
  width: 6px;
}

:deep(.el-menu)::-webkit-scrollbar-track {
  background: #263445;
}

:deep(.el-menu)::-webkit-scrollbar-thumb {
  background: #5a6d85;
  border-radius: 3px;
}

:deep(.el-menu)::-webkit-scrollbar-thumb:hover {
  background: #6b7b95;
}
</style>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  height: 100vh;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}



</style>